<template>
    <!-- 图表容器：设置宽度和高度 -->
    <div ref="chartRef" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts' // 引入 echarts 库
import { layer } from '@layui/layui-vue';
import api from '@/api';

// 获取数据列表
const initData = async () => {
    await api.get("resource/count").then((res) => {
        if (res.code === 200) {
            console.log(res.zyfb)
            // update chart if already initialized
            if (chartInstance) {
                chartInstance.setOption({
                    xAxis: {
                        data: res.zyfb.label || [],
                        axisLabel: {
                            show: true,
                            interval: 0, // 显示所有标签
                            rotate: 30 // 标签倾斜45度
                        }
                    },
                    series: [{
                        name: '资源数', type: 'bar', data: res.zyfb.data || [], color: '#185A56',
                        markPoint: {
                            data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }]
                        },
                        markLine: {
                            data: [{ type: 'average', name: '平均' }]
                        }
                    },
                        // { name: '产量', type: 'bar', data: res.zyfb.data || [] }
                    ]
                })
            }
        } else {
            layer.msg(res.msg, { icon: 2, time: 5000 });
        }
    })
}

// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance = null

// 初始化图表的方法
const initChart = () => {
    if (chartRef.value) {
        // 初始化 echarts 实例
        chartInstance = echarts.init(chartRef.value)

        // 配置项
        const option = {
            title: {
                text: '资源分布情况' // 图表标题
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    // dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    // restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['资源数', '产量'] // 图例名称
            },
            xAxis: {
                data: []
            },
            yAxis: {}, // Y 轴默认配置
            series: []
        }

        // 使用配置项渲染图表
        chartInstance.setOption(option)
    }
}

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
    chartInstance?.resize()
}

// 组件挂载后执行初始化
onMounted(() => {
    initChart()
    initData();
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener('resize', resizeChart)
})

// // 组件卸载前清理资源，防止内存泄漏
// onBeforeUnmount(() => {
//   window.removeEventListener('resize', resizeChart)
//   chartInstance?.dispose() // 销毁 echarts 实例
// })
</script>